<template>
    <div class="left">
        <div class="left-top">
            <el-avatar :size="98" :src="user.icon"></el-avatar>
            <span class="user-name mt20">
                {{user.name}}
            </span>
        </div>
        <div class="left-bt">
            <el-menu :default-active="$route.path" class="el-menu-vertical-demo" router>
                <el-menu-item index="/grzx" v-if="$store.state.maxRole == `tr`">
                    <i class="el-icon-user"></i>
                    <span slot="title">基本信息</span>
                </el-menu-item>
                <!-- <el-menu-item index="/wdsc" v-if="$store.state.maxRole == `tr`">
					<i class="el-icon-star-off"></i>
					<span slot="title">我的收藏</span>
				</el-menu-item>
				<el-menu-item index="/wdzy" v-if="$store.state.maxRole == `tr`">
					<i class="el-icon-coin"></i>
					<span slot="title">我的资源</span>
				</el-menu-item> -->
                <el-menu-item index="/mm">
                    <i class="el-icon-lock"></i>
                    <span slot="title">修改密码</span>
                </el-menu-item>
            </el-menu>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                user: this.$store.state.user,
            }
        },
    }
</script>
<style scoped lang="scss">
    .left {
        width: 270px;
        height: calc(100% - 50px);
        background-color: #fff;
        box-shadow: 2px 8px 35px 0px rgba(88, 111, 187, 0.16);
        border-radius: 7px;

        .left-top {
            height: 187px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
    }

    .left-bt>>>.el-menu-item {
        text-align: center;
        box-sizing: border-box;
        border-left: 3px solid #fff;
    }

    .left-bt>>>.el-menu-item.is-active {
        border-left: 4px solid #5b90ff;
        color: #5b90ff;
    }
</style>
